<template>
  <div class="app-container">
    <el-descriptions class="margin-top" title="借条信息" :column="1" size="medium">
      <template slot="extra">
        <el-button type="success" size="small" @click="handleDownLoadUrl">点击下载借条PDF</el-button>
      </template>
      <el-descriptions-item label="借条ID">{{info.contractId}}</el-descriptions-item>
      <el-descriptions-item
        style="margin-bottom:20px;"
        label="借条状态"
      >{{info.contractState|filterContractState}}</el-descriptions-item>
      <el-descriptions-item label="出借人">{{info.creditorMemberName||'-'}}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{info.creditorMemberPhone||'-'}}</el-descriptions-item>
      <el-descriptions-item label="身份证号">{{info.creditorMemberIdNumber||'-'}}</el-descriptions-item>
      <el-descriptions-item label="借款人">{{info.debtorMemberName||'-'}}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{info.debtorMemberPhone||'-'}}</el-descriptions-item>
      <el-descriptions-item label="身份证号">{{info.debtorMemberIdNumber||'-'}}</el-descriptions-item>
      <el-descriptions-item label="借款金额">{{info.loanAmount/100|toThousandFilter}}</el-descriptions-item>
      <el-descriptions-item label="借款期间">{{info.debtorTime||'-'}}-{{info.repaymentTime||'-'}}</el-descriptions-item>
      <el-descriptions-item label="借款事由">{{info.borrowingReason||'-'}}</el-descriptions-item>
      <el-descriptions-item
        label="利息"
      >{{info.contractInterest/100|toThousandFilter}}元（年利率：{{info.interestAnnualizedPercentage}}%）</el-descriptions-item>
      <el-descriptions-item label="逾期利率">{{info.timeInterest||'-'}}%</el-descriptions-item>
      <el-descriptions-item label="备注说明">{{info.contractRemarks||'-'}}</el-descriptions-item>
      <el-descriptions-item label="支付方式">{{info|filterPaymentType}}</el-descriptions-item>
      <el-descriptions-item label="管辖法院">{{info.courtAddress||'-'}}</el-descriptions-item>
      <el-descriptions-item label="借款人地址">{{info.debtorMemberAddress||'-'}}</el-descriptions-item>
      <el-descriptions-item label="出借人身份证">
        <el-image
          :src="info.creditorMemberIdNumberFront"
          :preview-src-list="[info.creditorMemberIdNumberFront,info.creditorMemberIdNumberBack]"
        >
          <div slot="error" class="image-slot">未上传</div>
        </el-image>
        <el-image
          :src="info.creditorMemberIdNumberBack"
        
          :preview-src-list="[info.creditorMemberIdNumberFront,info.creditorMemberIdNumberBack]"
        >
          <div slot="error" class="image-slot">未上传</div>
        </el-image>
      </el-descriptions-item>
      <el-descriptions-item label="借款人身份证">
        <el-image
          :src="info.debtorMemberIdNumberFront"
          :preview-src-list="[info.debtorMemberIdNumberFront,info.debtorMemberIdNumberBack]"
        >
          <div slot="error" class="image-slot">未上传</div>
        </el-image>
        <el-image
          :src="info.debtorMemberIdNumberBack"
          :preview-src-list="[info.debtorMemberIdNumberFront,info.debtorMemberIdNumberBack]"
        >
          <div slot="error" class="image-slot">未上传</div>
        </el-image>
      </el-descriptions-item>
      <el-descriptions-item label="其他材料照片">
        <el-image :src="info.contractAnnex" :preview-src-list="[info.contractAnnex]">
          <div slot="error" class="image-slot">未上传</div>
        </el-image>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions class="margin-top" title="用户信息(发起人)" :column="1" size="medium">
      <el-descriptions-item label="用户ID">{{info.memberDTO.memberId}}</el-descriptions-item>
      <el-descriptions-item label="支付宝昵称">{{info.memberDTO.memberNickName}}</el-descriptions-item>
      <el-descriptions-item label="支付宝手机号">{{info.memberDTO.memberPhone}}</el-descriptions-item>
      <el-descriptions-item label="支付宝ID">{{info.memberDTO.alipayOpenId}}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions class="margin-top" title="状态变更" :column="1" size="medium">
      <el-descriptions-item
        v-for="(item,index) in info.contractChangeRecords"
        :key="index"
        :label="item.createTime"
      >{{item.changeName}}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { apiContractInfoById } from "@/api/receipt/index.js";
export default {
  components: {},
  data() {
    return {
      contractId: "",
      info: {
        memberDTO:{}
      }
    };
  },
  mounted() {
    const { contractId } = this.$route.query;
    console.log(contractId);
    this.contractId = contractId;
    this.getData();
  },
  methods: {
    getData() {
      apiContractInfoById({ id: this.contractId }).then(res => {
        if (res.code == 200) {
          this.info = {
            ...res.data,
            memberDTO:res.data.promoterType == "CREDITOR_MEMBER"?res.data.creditorMemberDTO:res.data.debtorMemberDTO
          }
        }
      });
    },
    handleDownLoadUrl() {
      const a = document.createElement("a");
      a.href = this.info.contractUrl;
      document.body.append(a);
      a.click();
      setTimeout(() => {
        a.remove();
      }, 300);
    }
  }
};
</script>
<style scoped lang='scss'>
::v-deep .el-image {
  width: 200px;
  height: 120px;
  background-color: #ddd;
  margin: 0 20px 20px 0;
  .image-slot {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>